<template>
	<div class="view">
		<div class="writeBox">
			<textarea v-model.trim="publishContent" v-if="type == 1" :auto-height="true" :maxlength="40"
				placeholder="输入问题以问号结尾，4-40字"></textarea>
			<textarea v-model.trim="publishContent" v-else :auto-height="true" :maxlength="5000"
				placeholder="内容:不少于6个字"></textarea>
			<input v-if="type == 1" placeholder="悬赏(选填)悬赏积分数量" v-model.trim="reward" type="number" />
			<view v-if="videoUrl" class="show-video">
				<video objectFit="contain" :src="videoUrl"></video>
				<image class="delete" @click="deleteVideo()" src="/static/images/detele.png" />
			</view>
			<Imgupload v-else :type="2" addImage="/static/images/xupload.png" @Upload="imgInfo" />
		</div>
		<div class="Btn"><button @click="send()">发布</button></div>
	</div>
</template>

<script>
	import {
		addPublish
	} from '@/apis/request.js';
	import Imgupload from '@/components/Imgupload.vue';

	export default {
		components: {
			Imgupload
		},
		data() {
			return {
				type: '',
				groupId: '',
				imageUrl: '',
				videoUrl: '',
				userId: wx.getStorageSync('userInfo').id,
				publishContent: '',
				publishSubject: '',
				reward: null
			};
		},
		methods: {
			imgInfo(urls) {
				if (urls.includes('.mp4')) {
					this.videoUrl = urls;
				} else {
					this.imageUrl = urls;
				}
			},
			deleteVideo() {
				uni.showModal({
					title: '提示',
					content: '您确定要删除该视频吗？',
					success: res => {
						if (res.confirm) {
							this.videoUrl = null;
						}
					}
				});
			},
			send() {
				if (this.type == 1) {
					if (this.publishContent.length < 4 || this.publishContent.length > 40) {
						this.$Toast('输入问题应4-40字');
						return;
					}
				}
				if (this.type == 0) {
					if (this.publishContent.length < 6) {
						this.$Toast('输入的内容不少于6个字');
						return;
					}
				}
				// #ifdef MP-WEIXIN
				uni.requestSubscribeMessage({
					tmplIds: ['brs-9O4nr3Okge50L-Xn-sMxRkRvXJ8gqTlXcD5dnPQ']
				});
				// #endif
				addPublish({
						groupId: this.groupId,
						type: this.videoUrl ? 1 : 0,
						imageUrl: this.imageUrl,
						videoUrl: this.videoUrl,
						publishContent: this.publishContent,
						publishSubject: this.publishSubject,
						publishType: this.type,
						recourseAmount: this.reward || 0,
						userId: this.userId
					})
					.then(res => {
						this.$dialog('提示', '发布成功').then(res => {
							uni.$emit('sendOk');
							wx.navigateBack({
								delta: 2
							});
						});
					})
					.catch(err => {
						if (err.data.code == 4002) {
							this.showReward = false;
							this.rewardValue = null;
							uni.showModal({
								title: '积分不足',
								content: '是否前往充值积分？',
								confirmText: '充值',
								success(res) {
									if (res.confirm) {
										// 前往充值界面
										uni.navigateTo({
											url: '/pages/other/deposit/deposit'
										});
									}
								}
							});
						} else {
							this.$Toast('发布失败，请重试！');
						}
					});
			}
		},
		onLoad(options) {
			if (options.type == 1) {
				wx.setNavigationBarTitle({
					title: '求助'
				});
			} else {
				wx.setNavigationBarTitle({
					title: '发帖'
				});
			}
			this.groupId = options.groupId;
			this.type = options.type;
		}
	};
</script>

<style lang="scss" scoped>
	.view {
		padding-bottom: 128rpx;
		width: 100%;
		background-color: #ffffff;

		.writeBox {
			padding: 30rpx;
			background-color: #ffffff;

			textarea {
				margin-bottom: 20rpx;
				padding-bottom: 20rpx;
				width: 100%;
				min-height: 300rpx;
				border-bottom: 1rpx solid #f1f1f1;
			}

			input {
				margin-bottom: 30rpx;
				height: 90rpx;
				border: none;
			}

			div {
				textarea {
					min-height: 300rpx;
					padding-top: 20rpx;
					border: none;
				}

				img {
					width: 150rpx;
					height: 148rpx;
				}
			}
		}

		.show-video {
			position: relative;
			width: 100%;

			video {
				width: 100%;
			}

			.delete {
				position: absolute;
				top: 0;
				right: 0;
				width: 55rpx;
				height: 53rpx;
			}
		}

		.Btn {
			position: fixed;
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
			bottom: 20rpx;
			z-index: 99;

			button {
				width: 690rpx;
				height: 88rpx;
				background: #32C59A;
				border-radius: 44rpx;
				color: #ffffff;
				font-size: 30rpx;
				text-align: center;
				line-height: 88rpx;
			}
		}
	}
</style>